<!-- 利润激励 调整报表 -->
<template>
	<div class="boxwrapper">
		<el-breadcrumb separator="/" class="bread-title">
		    <el-breadcrumb-item :to="{ path: '/profitTable'}">利润激励</el-breadcrumb-item>
		    <el-breadcrumb-item :to="{ path: '/profitTableDetail',query:{yearTime:ruleForm.yearTime}}">员工分配表</el-breadcrumb-item>
		    <el-breadcrumb-item >年终奖分配明细表</el-breadcrumb-item>
		</el-breadcrumb>
		<h3>{{ruleForm.yearTime}}年年终分配明细表</h3>
		<el-table class="tb-edit" :data="tableData" border  highlight-current-row >
			<el-table-column label="序号" fixed width="50" :formatter="inittotal" align="center"></el-table-column>
			<el-table-column label="姓名" prop="staffName"  align="center">
			    <template slot-scope="scope">
			      <p v-if="scope.$index !==0" > {{scope.row.staffName}}</p>
			      <p v-else>——</p>
			    </template> 
			</el-table-column>
			<el-table-column label="工号" prop="staffCode"  align="center">
			    <template slot-scope="scope">
			      <p v-if="scope.$index !==0" > {{scope.row.staffCode}}</p>
			      <p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="岗位id" prop="stationName"  width="110" align="center">
			    <template slot-scope="scope">
			      <p v-if="scope.$index !==0" > {{scope.row.stationName}}</p>
			      <p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="岗位名称" prop="stationCode"  align="center">
			    <template slot-scope="scope">
			      <p v-if="scope.$index !==0" > {{scope.row.stationCode}}</p>
			      <p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="对应部门id" prop="departmentCode" align="center">
			    <template slot-scope="scope">
			      <p v-if="scope.$index !==0" > {{scope.row.departmentCode}}</p>
			      <p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="对应部门名称" prop="departmentName"  width="110" align="center">
			    <template slot-scope="scope">
			      <p v-if="scope.$index !==0" > {{scope.row.departmentName}}</p>
			      <p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="岗位标准权重" prop="standardWeight"  align="center">
			    <template slot-scope="scope">
			      <p v-if="scope.$index !==0" > {{scope.row.standardWeight}}</p>
			      <p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="部门应发占比（%）" prop="departmentStandardProportion"  align="center">
			    <template slot-scope="scope">
			      <p v-if="scope.$index !==0" > {{scope.row.departmentStandardProportion}}</p>
			      <p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="标准占比（‰）" prop="standardProportion"  align="center">
			    <template slot-scope="scope">
			      <p v-if="scope.$index !==0" > {{scope.row.standardProportion}}</p>
			      <p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="标准金额(元)" prop="standardAmount"  width="150" :formatter="initCash"  align="center">
			</el-table-column>
			<el-table-column label="十大事项完成情况（%)" prop="completionDegree"  width="100" align="center">
			    <template slot-scope="scope">
			      <el-input size="small" v-model="scope.row.completionDegree" v-if="scope.$index !==0" placeholder="请输入内容"  @input.native="checkNum(scope.row.completionDegree,scope.$index,'completionDegree')" @blur="blurchange(scope.row,scope.$index,'completionDegree')"></el-input>
			      <span v-else>——</span>
			    </template>  
			</el-table-column>
			<el-table-column label="调整后比例（%）" prop="proportionAdjusted"  align="center">
			    <template slot-scope="scope">
			      <p v-if="scope.$index !==0" > {{scope.row.proportionAdjusted}}</p>
			      <p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="调整后的标准金额(元)"  width="150" prop="standartAmountAdjusted" :formatter="initCash" align="center">
			</el-table-column>
			<el-table-column label="十大事项余额(元)"  width="150" prop="matterBalance"  align="center" :formatter="initCash" >
			</el-table-column>
			<el-table-column label="编制生效时间" prop="organizationStart" width="245"  align="center">
			    <template slot-scope="scope">
			      <el-date-picker
			     	v-if="scope.$index !==0" 
			        v-model="scope.row.organizationStart"
			        type="date"
			        :picker-options="pickerOptions0"
			        @change="blurchange(scope.row,scope.$index,'organizationStart')"
			        placeholder="选择编制生效时间">
			      </el-date-picker>
			      <p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="编制结束时间" prop="organizationEnd"  width="245" align="center">
			    <template slot-scope="scope">
					<el-date-picker
					  v-if="scope.$index !==0"
					  v-model="scope.row.organizationEnd"
					  type="date"
					  :picker-options="pickerOptions1"
					  @change="blurchange(scope.row,scope.$index,'organizationEnd')"
					  placeholder="选择编制结束时间">
					</el-date-picker>
			    	<p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="编制有效天数" prop="organizationDays"  align="center">
			    <template slot-scope="scope">
			      <p v-if="scope.$index !==0" > {{scope.row.organizationDays}}</p>
			      <p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="是否在岗" prop="isOrganization"align="center" width="180">
			    <template slot-scope="scope">
			      <el-radio-group v-if="scope.$index !==0" v-model="scope.row.isOrganization" @change="blurchange(scope.row,scope.$index,'isOrganization')" >
			            <el-radio :label="0">在岗&nbsp;</el-radio>
			            <el-radio :label="1">不在岗</el-radio>
			      </el-radio-group>
			      <p style="text-align: center" v-else>——</p> 
			    </template>  
			</el-table-column>
			<el-table-column label="在编开始时间" prop="onOrganizationStart"  width="110" align="center">
			    <template slot-scope="scope">
			      <p v-if="scope.$index !==0" > {{scope.row.onOrganizationStart}}</p>
			      <p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="离岗时间" prop="onOrganizationEnd"  width="110" align="center">
			    <template slot-scope="scope">
			      <p v-if="scope.$index !==0" > {{scope.row.onOrganizationEnd}}</p>
			      <p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="实际在岗天数" prop="onOrganizationDays"  align="center">
			    <template slot-scope="scope">
			      <p v-if="scope.$index !==0" > {{scope.row.onOrganizationDays}}</p>
			      <p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="实际金额（元）" prop="actuallyAmount"  width="150" align="center">
				<template slot-scope="scope">
				    <p v-if="scope.$index !== 0" >{{scope.row.actuallyAmount | initCash2}}</p>
				    <span v-else>{{scope.row.actuallyAmount | initCash2}}</span>
				</template>
			</el-table-column>
			<el-table-column label="标准余额（元）" prop="standardBalance"  width="150" align="center">
				<template slot-scope="scope">
				    <p v-if="scope.$index !== 0">{{scope.row.standardBalance | initCash2}}</p>
				    <span v-else>{{scope.row.standardBalance | initCash2}}</span>
				</template>
			</el-table-column>
			<el-table-column label="调整金额（元）"  width="140" prop="adjustedAmount" align="center">
				<template slot-scope="scope">
				    <el-input size="small" v-model="scope.row.adjustedAmount" v-if="scope.$index !==0" placeholder="请输入内容"  @input.native="checkNum(scope.row.adjustedAmount,scope.$index,'adjustedAmount')" @blur="blurchange(scope.row,scope.$index,'adjustedAmount')"></el-input>
				    <span v-else>{{scope.row.adjustedAmount | initCash2}}</span>
				</template>
			</el-table-column>
			<el-table-column label="调整比例(%)" prop="proportionAdjustedSec"  align="center">
			    <template slot-scope="scope">
			      <p v-if="scope.$index !==0" > {{scope.row.proportionAdjustedSec}}</p>
			      <p v-else>——</p>
			    </template>  
			</el-table-column>
			<el-table-column label="实发金额（元)" prop="actGrantAmount"  width="150" :formatter="initCash" align="center">
			</el-table-column>
		</el-table>
		<div class="pagebar">
		  <el-pagination
		    background
		    layout="total, sizes, prev, pager, next"
		    :current-page.sync="ruleForm.pageNum"
		    :page-sizes="[10, 20, 30, 40]"
		    :page-size="ruleForm.pageSize"
		    @size-change="handleSizeChange"
		    @current-change="handleCurrentChange"
		    :total="totalSize">
		  </el-pagination>
		</div>
	</div>
</template>
<script>
	import api from '@/api/apiPath'
	export default {
	    data() {
	    	var checkadjustedAmount = (rule, value, callback) => {
	    		let reg = /(^[0-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{1,2}$)/;
	    		if (!reg.test(value)) {
	    		    callback(new Error('请输入正数，可保留两位小数'));
	    		} else {
	    		    callback();
	    		}
	    	}
	        return {
				currentitem:{},//当前修改的item
	        	ruleForm:{
	        	    pageNum: 0,
	        	    pageSize: 10,
	        	    yearTime:undefined,
	        	},
	        	reportId:undefined,
	        	ruleForm2:{},
				pickerOptions0: {
				    disabledDate: (time) => {		
				        return time > new Date(this.currentitem.organizationEnd) || time < new Date(this.ruleForm.yearTime + '/1/1') ||  time > new Date(this.ruleForm.yearTime + '/12/31') 
				    }
				},
				pickerOptions1: {
				    disabledDate: (time) => {
				    	return time < new Date(this.currentitem.organizationStart) || time > new Date(this.ruleForm.yearTime + '/12/31') || time < new Date(this.ruleForm.yearTime + '/1/1')
				    }
				},
	        	rules:{
	        		isOrganization:[
	        			{required:true, message:'请选在岗状态',trigger:'blur'}
	        		],
	        		adjustedAmount:[
	        			{required:true, message:'请输入调整金额',trigger:'blur'},
	        			{validator: checkadjustedAmount, trigger: 'blur'}
	        		],
	        		completionDegree:[
	        			{required:true, message:'请输入十大事项的完成情况',trigger:'blur'},
	        			{validator: checkadjustedAmount, trigger: 'blur'}
	        		],
	        		organizationStart:[
	        			{required:true, message:'请选择编制开始时间',trigger:'blur'}
	        		],
	        		organizationEnd:[
	        			{required:true, message:'请选编制结束时间',trigger:'blur'}
	        		]
	        	},
	        	totalSize:0,
	        	tableData: [],
	        	centerDialogVisible:false,

	        }
	    },
	    created() {
	      this.ruleForm.yearTime = this.$route.query.yearTime
	      this.reportId = this.$route.query.reportId
	      this.getlist()
	    },
	    filters:{
	        initCash2(cellValue){
	        	if(!cellValue && typeof cellValue!="undefined" && cellValue!=0){
	        	 	 return  '——'
	        	} 
	            if(cellValue !== 0){
	                return cellValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");
	            }
	            if(cellValue == 0){
	                return "0.00"
	            }
	        },
	    },
	    methods: {
	    	checkNum(val,index,type){
	    	    let value = (val.toString().match(/^\d*(\.?\d{0,2})/g)[0])
	    	    this.$nextTick(()=>{
	    		   this.tableData[index][type] = value
	    	    })	
	    	},
	    	blurchange(row,index,type){
	    		this.currentitem = row
	    		this.$nextTick(()=>{
	    			//十大完成事项
	    			if (type == 'completionDegree') {
	    				if (row[type]>100) {
	    					 this.tableData[index][type] = 100
	    				}else if (row[type]=='' && row[type]!==0) {
	    					this.tableData[index][type] = 0
	    				}
	    			}else if(type=="organizationStart" || type=="organizationEnd"){
	    				//待后期动态date校验调整
	    				this.tableData[index][type] = this.getTimeString(row[type])
	    			}else {
	    				this.tableData[index][type] = row[type]
	    			}

					if (new Date(this.tableData[index].organizationEnd) < new Date(this.tableData[index].organizationStart)) {
						this.$message({
						    message: '编织生效时间不能大于编织结束时间',
						    type: 'warning'
						});
						return
					}
					
					let obj = {}
					obj['reportId'] =  +this.reportId
					let tempobj = this.tableData[index]
					let arr = []
					arr.push(tempobj)
					obj['array'] = arr
		    		this.axios.post(api.UPDATEAWARDSDATAILINFOS,obj).then((res) => {
		    		    if (res.data.code == 200) {
		    		    	this.$message({
		    		    	    message: '调整成功',
		    		    	    type: 'success'
		    		    	});
		    		    	this.centerDialogVisible = false;
		    		    	this.getlist()
		    		    	this.currentitem = {}
		    		    }
		    		}).catch((result) => {
						 this.getlist()
						 this.currentitem = {}
					})

	    		})	
	    	},
	    	closeDialog(){
	    		this.$refs.ruleForm2.resetFields()
	    	},
	    	getTimeString(timestamp){
				const time = new Date(timestamp)
				let dateStr = ''
				const year = time.getFullYear() //当前完整年数 （4位 1970-？？？）
				const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
				const day = String(time.getDate()).length === 1 ? '0' + time.getDate() : time.getDate()
				dateStr = year + '-' + month + '-' + day
				let timeStr = ''
				const hours = time.getHours() //当前小时数（ 0-23）
				const hh = String(hours).length === 1 ? '0' + hours : hours
				const minutes = time.getMinutes()//当前分钟 （0-59）
				const mm = String(minutes).length === 1 ? '0' + minutes : minutes
				const seconds = time.getSeconds() //当前秒数 （0-59）
				const ss = String(seconds).length === 1 ? '0' + seconds : seconds
				timeStr = `${hh}:${mm}:${ss}`
				return dateStr + ' ' + timeStr
	    	},
	    	specialTimeChange (val) {
	   			 this.ruleForm2.organizationStart = val ? new Date(val).getTime() : undefined
	    	},
	    	specialTimeChange2 (val) {
	    	     this.ruleForm2.organizationEnd = val ? new Date(val).getTime() : undefined
	    	},

	    	handleCurrentChange(){
	    	    this.getlist()
	    	},
	    	handleSizeChange(val){
	    	    this.ruleForm.pageSize = val
	    	    this.getlist();
	    	},
	    	inittotal(row, column, cellValue, index){
	    		if(index == 0){
	    		    return '合计';
	    		}
	    		return index
	    	},
	    	initCash(row, column, cellValue, index){
	    		if(!cellValue && typeof cellValue!="undefined" && cellValue!=0){
	    		 	 return  '——'
	    		} 
	    	    if (index == 0) { 
	    	        if (typeof (cellValue) =="undefined"){
	    	            return '——'
	    	        }
	    	    }
	    	    if(cellValue !== 0){
	    	        return cellValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");
	    	    }
	    	    if(cellValue == 0){
	    	        return "0.00"
	    	    }
	    	},
	    	getlist(){
	    		this.axios.post(api.AWARDSDATAILINFO,this.ruleForm).then((res) => {
	    		    if (res.data.code == 200) {
	    		        this.tableData = res.data.data.list;
	    		        this.totalSize = res.data.data.total;
	    		    }
	    		})
	    	}
	    }
	}
</script>
<style scoped lang="stylus">
	.boxwrapper a
		text-decoration none

	// .boxwrapper .tb-edit .el-input {
	//   display: none
	// }
	// .boxwrapper .tb-edit .current-row .el-input {
	//   display: block
	// }
	// .boxwrapper .tb-edit .current-row .el-input+span {
	//   display: none
	// }

</style>